<template>
	<view class="calendar-container">
		<view class="calendar-bg"></view>
		<view class="calendar-main">
			<view class="calendar-header">
				<view class="calendar-header-main">
					<u-row gutter="16">
						<u-col span="6">
							<cc-class-select :value.sync="query.cla_id" @complete="fetchData" />
						</u-col>
						<u-col span="6">
							<cc-class-status-select :value.sync="query.status" @complete="fetchData" />
						</u-col>
					</u-row>
					<view class="fcb current-date">
						<view class="fc">
							<view class="current-date-title">
								{{ currentDateTitle }}
							</view>
						</view>
						<view class="fc">
							<view @click="goToday" class="go-today font-primary">今天</view>
							<cc-image @click="handleCreateClassrule" width="48rpx" height="48rpx" :src="getImage('calendar-add')"></cc-image>
						</view>
					</view>
					<view class="calendar-bottom">
						<cc-calendar :signList="signList" ref="CodeCatCalendar" @change="chooseDate" showShrink shrinkState="week"></cc-calendar>
					</view>
				</view>
			</view>

			<view class="list" v-if="count">
				<block v-for="(item, index) in list" :key="index">
					<cc-classtime :item="item" @complete="getList(1)"></cc-classtime>
				</block>
			</view>
			<cc-loadmore :showLimit="4" :loading="loading" :current="list.length" :count="count" />
			<view class="skeleton-main" v-if="!loading && !count">
				<view class="empty">
					<cc-empty mode="list" text="暂无课节" />
				</view>
			</view>
		</view>
		<cc-create-classrule :showAction="false" ref="CreateClassruleRef" />
	</view>
</template>

<script>
import { classCourseList } from '@/codecat/api/education/class/classTime';
import { getCurrentPageUrl } from '@/codecat/utils/index.js';
export default {
	computed: {
		today() {
			return {
				year: this.$dayjs().get('year'),
				month: this.$dayjs().get('month') + 1,
				day: this.$dayjs().get('date')
			};
		},
		currentDateTitle() {
			if (this.selectedDate) {
				const { year, month } = this.selectedDate;
				return `${year}年${month}月`;
			} else return '--';
		},
		currentDate() {
			if (this.selectedDate) {
				const { year, month, day } = this.selectedDate;
				return this.$dayjs(`${year}-${month}-${day}`).format('YYYY-MM-DD');
			} else return this.$dayjs(new Date()).format('YYYY-MM-DD');
		}
	},
	data() {
		return {
			selectedDate: null,
			loading: false,
			list: [],
			count: 0,
			query: {
				cla_id: null,
				date_range: [],
				status: null,
				page: 1,
				limit: 10,
				sort: 'asc',
				teacher_id: ''
				// teacher_id: this.userInfo.id
			},
			signList: []
		};
	},
	onReachBottom() {
		if (this.list.length < this.count) {
			this.getList();
		}
	},
	methods: {
		handleCreateClassrule() {
			this.$refs['CreateClassruleRef'].teachingTypeOpen();
		},
		fetchData() {
			this.getList(1);
			this.getSignList(this.selectedDate);
		},
		getList(first) {
			if (!this.token) {
				return;
			}
			const query = this.$lodash.cloneDeep(this.query);
			if (first) {
				query.page = 1;
				this.list = [];
				this.count = 0;
			} else {
				query.page += 1;
			}
			this.loading = true;
			classCourseList(query)
				.then((res) => {
					this.loading = false;
					this.query.page = query.page;
					const { list, count } = res.data;
					this.count = count || 0;
					if (Array.isArray(list) && list.length) {
						this.list = this.list.concat(list);
					}
				})
				.catch((_) => {
					this.loading = false;
				});
		},
		// 获取当月所有课节，为了打标记
		getSignList(e) {
			const begin_date = this.$dayjs(e.value).startOf('M').format('YYYY-MM-DD');
			const end_date = this.$dayjs(e.value).endOf('M').format('YYYY-MM-DD');
			classCourseList({
				...this.query,
				limit: 999,
				date_range: [begin_date, end_date]
			}).then((res) => {
				const { list } = res.data;
				if (Array.isArray(list) && list.length) {
					this.signList = list.map((e) => {
						return {
							date: e.cla_date
						};
					});
				} else this.signList = [];
			});
		},
		async chooseDate(e) {
			const userInfo = await this.$store.dispatch('GetInfo');
			this.query.teacher_id = userInfo.id;
			// {date: "2024-06-29", year: 2024, month: 6, day: 29, week: 6, …}
			if (this.selectedDate === e) return;
			if (this.selectedDate?.month !== e.month) {
				this.getSignList(e);
			}
			this.selectedDate = e;
			this.createDateRange();
			// 日期多次切换，只执行最后一次
			uni.$u.debounce(this.getList(1), 300);
		},
		createDateRange() {
			const date = this.$dayjs(this.currentDate);
			const begin_date = date.startOf('d').format('YYYY-MM-DD');
			const end_date = date.endOf('d').format('YYYY-MM-DD');
			this.query.date_range = [begin_date, end_date];
		},
		/**
		 * 返回当天
		 */
		goToday() {
			this.$refs['CodeCatCalendar'].goToday();
		},
		handleLogin() {
			const curPage = getCurrentPageUrl();
			this.$store.commit('SET_REDIRECTTO', curPage);
			this.$Router.replaceAll('/login');
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
